<template>
  <div class="detail-main">
    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
      <el-steps :active="orderBase.status+1" align-center>
        <el-step title="待付款" :description="orderBase.createTime" />
        <el-step title="待发货" :description="orderBase.paymentTime" />
        <el-step title="已发货" :description="orderBase.modifyTime" />
        <el-step v-if="orderBase.status!==4" title="已完成" :description="orderBase.finishTime" />
        <el-step v-if="orderBase.status==4" title="退货" :description="orderBase.receiveTime" />
      </el-steps>
      <el-divider />

      <div>
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">订单信息:</span>
          <el-tag v-show="orderBase.status===0" class="tab" size="small" type="danger" effect="dark">待付款</el-tag>
          <el-tag v-show="orderBase.status===1" class="tab" size="small" type="warning" effect="dark">待发货</el-tag>
          <el-tag v-show="orderBase.status===2" class="tab" size="small" type="success" effect="plain">已发货</el-tag>
          <el-tag v-show="orderBase.status===3" class="tab" size="small" type="success" effect="plain">已完成</el-tag>
          <el-tag v-show="orderBase.status===4" class="tab" size="small" type="warning" effect="dark">退货</el-tag>
          <el-tag v-show="orderBase.status===5" class="tab" size="small" type="info" effect="plain">无效订单</el-tag>
        </div>
        <el-row :gutter="20" style="font-size: 14px;padding: 20px 0;">
          <el-col :span="6" :offset="0">
            <div>订单金额: <span style="color: #f00;">{{ orderBase.payAmount }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>订单编号: {{ orderBase.orderSn }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>用户账号: {{ orderBase.memberUsername }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>备注: {{ orderBase.note }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="font-size: 14px;">
          <el-col :span="6" :offset="0">
            <div>下单时间: {{ orderBase.createTime }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>付款时间: {{ orderBase.paymentTime }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>发货时间: {{ orderBase.modifyTime }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>收货时间: {{ orderBase.finishTime }}</div>
          </el-col>
        </el-row>
        <el-divider />
        <!-- 收货人信息 -->
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">收货人信息:</span>
        </div>
        <el-row :gutter="20" style="font-size: 14px;padding: 20px 0;">
          <el-col :span="6" :offset="0">
            <div>收货人: {{ orderBase.receiverName }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>用户姓名: {{ orderBase.memberUsername }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>手机号码: {{ orderBase.receiverPhone }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>邮政编码: {{ orderBase.receiverPostCode }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="font-size: 14px;">
          <el-col :span="6" :offset="0">
            <div>城市: {{ orderBase.receiverProvince }}{{ orderBase.receiverCity }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>详细地址: {{ orderBase.receiverDetailAddress }}</div>
          </el-col>
        </el-row>
        <el-divider />

        <!-- 商品信息 -->
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">商品信息:</span>
        </div>

        <el-table :data="orderItems" border stripe>
          <el-table-column
            prop="productName"
            label="商品名称"
            width="120"
            align="center"
            fixed="left"
          />
          <el-table-column
            prop="productName"
            label="商品图片"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-image style="width: 80px; height: 80px;" :src="scope.row.productPic" fit="fill" />

            </template>
          </el-table-column>
          <el-table-column
            label="是否退货"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-show="scope.row.isReturn===1" type="danger" size="small" effect="plain">是</el-tag>
              <el-tag v-show="scope.row.isReturn===0" type="info" size="small" effect="plain">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="productBrand"
            label="品牌"
            width="120"
            align="center"
          />
          <el-table-column
            prop="productPrice"
            label="价格"
            width="120"
            align="center"
          />
          <el-table-column
            prop="productQuantity"
            label="商品数量"
            width="120"
            align="center"
          />
          <el-table-column
            prop="productPrice"
            label="小计"
            width="120"
            align="center"
          />
        </el-table>
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">费用信息:</span>
        </div>
        <el-row :gutter="20" style="font-size: 14px;padding: 20px 0;">
          <el-col :span="6" :offset="0">
            <div>运费金额: <span style="color: #f00;">{{ 0 }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>订单总金额: <span style="color: #f00;">{{ orderBase.payAmount }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>实际金额: <span style="color: #f00;">{{ orderBase.payAmount }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>促销优化金额: <span style="color: #f00;">{{ orderBase.totalAmount }}</span></div>
          </el-col>

        </el-row>
      </div>
    </el-card>

  </div>
</template>

<script>
import { orderDetail } from '@/api/order'

export default {
  name: 'DetailPage',

  data() {
    return {
      step: 1,
      orderId: null,
      orderBase: '',
      orderItems: []
    }
  },
  created() {
    this.orderId = this.$route.params.id
    if (this.orderId) {
      this.getOrderDetail()
    }
  },

  mounted() {

  },

  methods: {
    async getOrderDetail() {
      const res = await orderDetail(this.orderId)
      const { success, message, data: { orderDetail: { orderBase, orderItems }}} = res
      if (success) {
        this.orderBase = orderBase
        this.orderItems = orderItems
      } else {
        this.$message.error(message)
      }
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
// .el-divider.el-divider--horizontal{
//   height: 2px;
// }
</style>
